<template>
  <div class="carousel">
    <div class="container">
      <div class="img-belt" id="img-belt">
        <div class="img-box" v-for="item in img_urls" :key="item">
          <img :src="item + '?param=360y166' "  alt>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { clearInterval } from 'timers';
export default {
    created() {
        /* banner */
        this.axios.get('/banner').then(res =>{
            for (let index = 0; index < res.data.banners.length; index++) {
              const element = res.data.banners[index];
              this.img_urls.push(element.picUrl)
            }
        })
        console.log(this.img_urls);
        this.crsTimer = setInterval(() => {
            this.test();
        }, 6000);
    },
    data() {
        return {
            img_urls: [],
            crsTimer: null,
            switchMove: true
        }
    },
    beforeDestroy() {
      window.clearInterval(this.crsTimer);
      this.crsTimer = null;
    },
  
  methods: {
    test() {
        if (this.switchMove) {
            this.switchMove = false;
            let img_belt = document.getElementById("img-belt");
            let fst_box = document.getElementsByClassName("img-box")[0];
            let new_box = fst_box.cloneNode(true);
            img_belt.appendChild(new_box);
            fst_box.classList.toggle("disappear");
            setTimeout(() => {
              img_belt.removeChild(fst_box);
              this.switchMove = true;
            }, 750);
        }
    }
  }
};
</script>

<style lang="scss" scoped>
.carousel{
    margin-top: 15px;
    border-top: 1px solid transparent;
}
.container {
  margin: 20px auto;
  padding-top: 42%;
  width: 100%;
  height: 0px;
  background-color: transparent;
  position: relative;
  overflow: hidden;

  .img-belt {
    position: absolute;
    top: 0%;
    left: -200%;
    width: 500%;
    .img-box {
      float: left;
      width: 20%;
      height: auto;
      overflow: hidden;
      img {
        width: 90%;
        height: auto;
        border-radius: 10px;
      }
    }
  }
}
.test-btn {
  margin: 0 auto;
  text-align: center;
  max-width: 100px;
  background-color: #eeeeee;
  span {
    padding: 15px 25px;
    font-size: 24px;
    color: black;
  }
}
.disappear {
  transition: all 0.7s linear;
  width: 0 !important;
}
</style>